import React, { Component } from 'react'
import { Menu } from 'antd'
import { NavLink } from 'react-router-dom'
import menuConfig from '../../config/menuConfig'
import './index.less'
const SubMenu = Menu.SubMenu;

class NavLeft extends Component {
    state = {}

    //组件将要加载时进行渲染
    componentWillMount() {
        const menuTreeNode = this.renderMenu(menuConfig)
        this.setState({
            menuTreeNode
        })
    }
    //渲染左侧菜单事件
    renderMenu = (data) => {
        return data.map((item) => {
            if (item.children) {
                return (
                    <SubMenu key={item.key} title={item.title}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return (
                <Menu.Item title={item.title} key={item.key}>
                    <NavLink to={item.key}>{item.title}</NavLink>
                </Menu.Item>
            )
        })
    }
    render() {
        return (
            <div>
                <NavLink to="/home">
                    <div className="logo">
                        <img src="assets/favicon.ico" alt="图标" />
                        <span>DAO C</span>
                    </div>
                </NavLink>
                <Menu
                    theme="dark"
                >
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}
export default NavLeft